<template>
  <div>
    <el-form-item label="占位内容">
      <el-input v-model="data.placeholder"
                placeholder="占位内容"></el-input>
    </el-form-item>
    <el-form-item label="默认值">
      <el-input v-model="data.value"
                placeholder="默认值"></el-input>
    </el-form-item>
    <el-form-item label="是否多选">
      <el-switch v-model="data.multiple"></el-switch>
    </el-form-item>
    <el-form-item label="是否可拖拽（需引入sortable.js）"
                  v-if="data.multiple">
      <el-switch v-model="data.drag"></el-switch>
    </el-form-item>
    <el-form-item label="多选数量限制"
                  v-if="data.multiple">
      <el-input-number v-model="data.limit"
                       controls-position="right"
                       placeholder="多选限制"
                       :min="0"
                       :max="data.dicData.length"></el-input-number>
    </el-form-item>
    <el-form-item label="数据配置">


    </el-form-item>
    <common-dict-config :data="data"/>
    <el-form-item label="级联配置">
      <draggable tag="ul"
                 :list="data.cascaderItem"
                 :group="{ name: 'cascaderItem' }"
                 ghost-class="ghost"
                 handle=".drag-item">
        <template #item="{element,index}">
          <li
              :key="index">
            <i class="drag-item el-icon-s-operation"
               style="font-size: 16px; margin: 0 5px; cursor: move;"></i>
            <el-input size="small"
                      v-model="data.cascaderItem[index]"
                      placeholder="级联属性值"></el-input>
            <el-button @click="handleRemoveCascaderItemFields(index)"
                       circle
                       plain
                       type="danger"
                       size="small"
                       icon="el-icon-minus"
                       style="padding: 4px;margin-left: 5px;">
            </el-button>
          </li>
        </template>
      </draggable>
      <div style="margin-left: 22px;">
        <el-button text type="primary"
                   @click="handleAddCascaderItemFields">添加列
        </el-button>
      </div>
    </el-form-item>
    <el-form-item label="级联默认选中">
      <el-input-number v-model="data.cascaderIndex"
                       controls-position="right"
                       placeholder="级联默认选中"
                       :min="0"></el-input-number>
    </el-form-item>
    <el-form-item label="字典key配置">
      <ul>
        <li v-for="(value, key) in data.props"
            :key="key">
          <span style="width: 50px">{{ key }}</span>
          <el-input size="small"
                    v-model="data.props[key]"
                    placeholder="key配置"></el-input>
        </li>
      </ul>
    </el-form-item>
    <el-form-item label="尺寸">
      <el-radio-group v-model="data.size"
                      size="small">
        <el-radio-button value="large">大</el-radio-button>
        <el-radio-button value="default">默认</el-radio-button>
        <el-radio-button value="small">小</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否可清空">
      <el-switch v-model="data.clearable"></el-switch>
    </el-form-item>
    <el-form-item label="是否可搜索">
      <el-switch v-model="data.filterable"></el-switch>
    </el-form-item>

  </div>
</template>

<script>

import CommonDictConfig from "components/form-design/config/commonDictConfig.vue";

export default {
  name: "config-select",
  props: ['data'],
  components: {CommonDictConfig},
  data() {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        length: null
      },
      option: {
        column: [
          {
            type: 'input',
            prop: 'key',
            label: 'key'
          }, {
            type: 'input',
            prop: 'value',
            label: 'value'
          }
        ]
      },
    }
  },
  methods: {
    generateRule() {
      const rules = [];
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) rules.push(this.validator[key])
      })
      this.data.rules = rules
    },

    handleRemoveCascaderItemFields(index) {
      this.data.cascaderItem.splice(index, 1)
    },
    handleAddCascaderItemFields() {
      if (!this.data.cascaderItem) {
        this.data.cascaderItem = []
      }
      this.data.cascaderItem.push('')
    },
    handleTabClick({name}) {
      if (name === "") {

      }
      if (name === 'remote' && !this.data.dicQueryConfig) {
        this.data.dicQueryConfig = []
      }
    }
  },
  watch: {
    'data.required': function (val) {
      if (val) this.validator.required = {required: true, message: `请选择${this.data.label}`}
      else {
        this.validator.required = null
      }


      this.generateRule()
    },
  }
}
</script>
